<template>
  <div class="shebiexiang">
    <dao :title="title" />
    <view style="height: 500rpx">
      <image
        style="
          width: 100%;
          margin-bottom: 30rpx;
          border-radius: 20rpx;
          box-shadow: 0 2px 2px 0px rgba(198, 197, 197, 0.3);
        "
        src="../../static/便携寿司饭团机.png"
        mode="widthFix"
        lazy-load="false"
        binderror=""
        bindload=""
      >
      </image>
    </view>
    <view
      style="display: flex; align-items: center; flex-direction: row-reverse"
    >
      <text style="font-size: 24rpx; margin-right: 20rpx; margin-left: 20rpx"
        >设备状态</text
      >

      <view
        class="imgss"
        :style="{
          background: xiangData.RunningStatus == 0 ? '#00953b' : '#999',
        }"
      ></view>
    </view>
    <!-- <view
      style="padding: 0 30rpx; display: flex; justify-content: space-between"
    >
      <view
        style="
          border-radius: 20rpx;
          width: 70%;
          padding: 20rpx 40rpx;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 300rpx;
          box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.3);

          background-color: #70b6fd;
        "
      >
        <view style="display: flex; justify-content: space-between">
          <view class="rong">
            <view class="box">
              <image class="imgs" src="../../static/dafan.png"> </image>
            </view>
            <text>打饭</text>
          </view>
          <view class="rong">
            <view class="box">
              <image class="imgs" src="../../static/饭量.png"> </image> </view
            ><text>饭量</text>
          </view>
        </view>
        <view style="display: flex; justify-content: space-between">
          <view class="rong">
            <view class="box">
              <image class="imgs" src="../../static/中图模式.png"> </image>
            </view>
            <text>模式</text>
          </view>
          <view class="rong">
            <view class="sss">
              <view class="imgss"></view>
            </view>
            <text>状态</text>
          </view>
        </view>
      </view>
      <view
        style="
          border-radius: 20rpx;
          width: 25%;
          height: 300rpx;
          display: flex;
          padding: 30rpx 0;
          box-sizing: border-box;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          color: #fff;
          box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.3);

          background-color: #70b6fd;
        "
      >
        <text> 开机 </text>
        <view style="transform: rotate(-90deg)">
          <switch checked />
        </view>
        <text>关机</text>
      </view>
    </view> -->
    <view style="padding: 0 100rpx">
      <view
        style="
          display: flex;

          flex-wrap: wrap;
          justify-content: space-around;
        "
      >
        <view @click="dafanjump" class="rong">
          <view class="box">
            <image class="imgs" src="../../static/mifan.png"> </image>
            <text>打饭</text>
          </view>
        </view>
        <view class="rong">
          <view @click="dafanjumps" class="box">
            <image class="imgs" src="../../static/jiliang.png"> </image>
            <text>饭量</text>
          </view>
        </view>
        <view @click="dafanjumpss" class="rong">
          <view class="box">
            <image class="imgs" src="../../static/zhongtu.png"> </image>

            <text>模式</text>
          </view>
        </view>
        <view @click="bianhua" class="rong">
          <view class="box">
            <image class="imgs" :src="dianyuanimg"> </image>

            <text>电源</text>
          </view>
        </view>
      </view>
    </view>
    <view
      style="
        margin: 40rpx;
        text-align: center;
        padding: 20rpx;
        box-sizing: border-box;
        border-radius: 20rpx;
        box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.1);
      "
    >
      <text style="font-weight: 700; color: #6c6c6c"> 米饭软硬度</text>

      <slider
        value="50"
        style="height: 20px"
        activeColor="#21afff"
        block-color="#21afff"
        block-size="20"
        backgroundColor="#fff"
        @change="sliderChange"
        show-value
      />
    </view>
    <button
      style="color: #ffffff; background-color: #21afff; margin: 0 20rpx"
      type="primary"
    >
      保存设置
    </button>
  </div>
</template>

<script setup>
import { getXaingqq } from "../../api/login";
import dao from "../../pages/conpments/daohang.vue";

import {
    onLoad,
    onShow,onHide
  } from "@dcloudio/uni-app";

import {
  ref,
  reactive,
  onMounted,
  getCurrentInstance,
  inject,
  computed,
} from "vue";

const dafanjump = () => {
  uni.navigateTo({
    url: "/subpkg/dafan/index",
    success: function (res) {
      // 通过eventChannel向被打开页面传送数据
      res.eventChannel.emit("acceptDataFromOpenerPage", {
        data: xiangData.value.MealsWeightConfig,
        Mode: xiangData.value.Mode,
        id: xiangData.value.Id,
      });
    },
  });
};
const dafanjumpss = () => {
  uni.navigateTo({
    url: "/subpkg/moshi/index",
    success: function (res) {
      // 通过eventChannel向被打开页面传送数据
      res.eventChannel.emit("acceptDataFromOpenerPage", {
        data: xiangData.value.MealsWeightConfig,
        Mode: xiangData.value.Mode,
        id: xiangData.value.Id,
      });
    },
  });
};
const dafanjumps = () => {
  uni.navigateTo({
    url: "/subpkg/fanliaongtiao/index",
    success: function (res) {
      // 通过eventChannel向被打开页面传送数据
      res.eventChannel.emit("acceptDataFromOpenerPage", {
        data: xiangData.value.MealsWeightConfig,
        Mode: xiangData.value.Mode,
        id: xiangData.value.Id,
      });
    },
  });
};

const sliderChange = () => {};
let dianyuanimg = ref("/static/off.png");
let suo = ref(false);
const bianhua = () => {
  uni.showModal({
    title: "电源控制",
    content: `${
      suo.value ? "设备运行中，您确定要关机吗？" : "您要开启本设备吗？"
    }`,
    cancelText: "取消",
    cancelColor: "#999",
    confirmText: `${suo.value ? "关机" : "开机"}`,
    confirmColor: "#3280fe",
    success(res) {
      if (res.confirm) {
        uni.showLoading({
          title: `${suo.value ? "关机" : "开机"}中`,
        });
        setTimeout(function () {
          uni.hideLoading();

          suo.value = !suo.value;
          if (suo.value) {
            dianyuanimg.value = "/static/关机on.png";
          } else {
            dianyuanimg.value = "/static/off.png";
          }
          uni.showToast({
            title: "操作成功！",
            duration: 1000,
          });
        }, 2000);
      } else if (res.cancel) {
        // 选择弹框内 不授权
        console.log("用户点击不授权");
      }
    },
  });
};

let title = ref("设备控制");
let xiangData = ref({});
const getData = async (id) => {
  const { data } = await getXaingqq(id);
  xiangData.value = data.data;


  if(xiangData.value.RunningStatus!=0){
    uni.showModal({
    title: "提示",
    content:'设备处于离线状态，请配网后使用此功能。',
    cancelText: "取消",
    cancelColor: "#999",
    confirmText: '配网',
    confirmColor: "#3280fe",
    success(res) {
      if (res.confirm) {
        uni.redirectTo({
    url: "/subpkg/peiwang/index",
    success: function (res) {
      // 通过eventChannel向被打开页面传送数据
      res.eventChannel.emit("acceptDataFromOpenerPage");
    },
  });
      } else if (res.cancel) {
        // 选择弹框内 不授权
        uni.navigateBack({
    delta: 1,
  });
      }
    },
  });
  }

 


  // title.value = data.data;
};


onShow(()=>{


})
onMounted(() => {
  const instance = getCurrentInstance().proxy;
  const eventChannel = instance.getOpenerEventChannel();

  eventChannel.on("acceptDataFromOpenerPage", function (data) {
    console.log("acceptDataFromOpenerPage", data);
    getData(data.data);
  });
});
</script>

<style scoped lang="scss">
.imgs {
  padding: 10rpx;
  width: 100rpx;
  height: 100rpx;
}
.imgss {
  width: 30rpx;
  height: 30rpx;
  background: #00953b;
  box-shadow: 0 1px 5px 2px rgba(255, 255, 255, 0.5);

  border-radius: 50%;
}
.rong {
  justify-content: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  color: #6c6c6c;
  font-size: 28rpx;
  margin-top: 60rpx;
}
.box {
  /* border: 6rpx solid #fff; */
  border-radius: 20%;

  display: flex;
  box-shadow: 0px 3px 10px rgba(135, 134, 134, 0.3);
  background-color: #fff;

  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #6c6c6c;
  font-weight: 700;
  width: 200rpx;
  font-size: 24rpx;
  height: 200rpx;
}
.sss {
  border-radius: 50%;
  display: flex;
  box-shadow: 0 1px 5px 2px rgba(198, 197, 197, 0.3);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  width: 80rpx;
  font-size: 24rpx;
  height: 80rpx;

  .imgss {
    margin-bottom: 10rpx;
  }
}
wx-slider .wx-slider-handle-wrapper {
  height: 20rpx;
}
.shebiexiang {
  width: 100vw;
  height: 100vh;
  //
  background: linear-gradient(
    to bottom,
    #faf6f6,
    rgba(214, 253, 244, 0.43),
    #c2e9fd
  );

  box-sizing: border-box;
}
</style>
